<template>
  <button :class="plain ? type + 'pl' : type" class='xueyanButton' :style='styleBuilder' :disabled='disabled'>{{ name }}<slot></slot></button>
</template>

<script lang="ts" setup>
  import { angleTypes, buttonSize, buttonTypes } from './Button'
  import { computed } from 'vue'

  const props = defineProps({
    name: String,
    size: {
      type: String,
      values: buttonSize,
      default: ''
    },
    type: {
      type: String,
      values: buttonTypes,
      default: 'default'
    },
    plain: Boolean,
    disabled: Boolean,
    angle: {
      type: String,
      values: angleTypes,
      default: ''
    }
  })

  const styleBuilder = computed(()=>{
    let styleObj: any = {}
    switch (props.size){
      case 'mini':
        styleObj.fontSize = '8px'
        break
      case 'large':
        styleObj.fontSize = '18px'
        break
      case 'superlarge':
        styleObj.fontSize = '25px'
        break
      case 'small':
        styleObj.fontSize = '12px'
        break
      default:
        styleObj.fontSize = '16px'
        break
    }
    if(props.disabled && !props.plain){
      styleObj.cursor = 'not-allowed'
      styleObj.backgroundColor = '#BBBBBB';
      styleObj.color =  '#FFF';
      styleObj.borderColor = '#AAAAAA';
    }else if(props.disabled && props.plain){
      styleObj.cursor = 'not-allowed'
      styleObj.backgroundColor = '#EEEEEE';
      styleObj.color =  '#BBB';
      styleObj.borderColor = '#AAAAAA';
    }

    switch (props.angle){
      case 'square':
        styleObj.borderRadius = '0px'
        break
      case 'round':
        styleObj.borderRadius = styleObj.fontSize
        break
    }
    return styleObj
  })
</script>

<style scoped>
  .xueyanButton{
    outline: none ;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }

  .danger{
    background-color: #F08080;
    color: #fff;
    border-color: #ffffff;
  }
  .danger:hover,.dangerpl:hover {
    filter: drop-shadow(0 0 3px #F08080aa);
  }
  .dangerpl{
    background-color: #fff;
    color: #F08080;
    border-color: #F08080;
  }
  .primary{
    background-color: skyblue;
    color: #fff;
    border-color: #ffffff;
  }
  .primary:hover,.primarypl:hover {
    filter: drop-shadow(0 0 3px #87ceebaa);
  }
  .primarypl {
    background-color: #fff;
    color: skyblue;
    border-color: skyblue;
  }
  .success {
    background-color: #90EE90;
    color: #fff;
    border-color: #ffffff;
  }
  .success:hover,.successpl:hover {
    filter: drop-shadow(0 0 3px #90ee90aa);
  }
  .successpl {
    background-color: #fff;
    color: #90EE90;
    border-color: #90EE90;
  }
  .warning {
    background-color: #FF7F50;
    color: #fff;
    border-color: #ffffff;
  }
  .warningpl {
    background-color: #fff;
    color: #FF7F50;
    border-color: #FF7F50;
  }
  .info {
    background-color: #DDD;
    color: #fff;
    border-color: #BBB;
  }
  .infopl {
    background-color: #fff;
    color: #DDD;
    border-color: #BBB;
  }
  .default {
  }
</style>
